<style lang="less" scoped>
.content{
  padding-top: 92px;
  .setItem{
    height: 97px;
    padding: 0 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26px;
    color: #fff;
    border-bottom: 1px solid #333E58;
    img{
      width: 17px;
      margin-left: 35px;
    }
    .right{
      display: flex;
      align-items: center;
      .noBind{
        color: #999
      }
    }
  }
}
</style>

<template>
  <div>
    <top-bar></top-bar>
    <div class="content">
      <div class="setItem" @click="changeRoute('/UpdatePassword')">
        <div>修改密码</div>
        <div class="right">
          <p>上次登录：
            <span v-if="store.state.userMsg.lastLoginIp">{{store.state.userMsg.lastLoginIp}}</span>
            <span v-else class="noBind">暂无</span>
          </p>
          <img src="../../assets/images/right.png" alt="">
        </div>
      </div>
      <div class="setItem" @click="changeRoute('/UpdateName')">
        <div>实名认证</div>
        <div class="right">
          <p>
            <span v-if="store.state.userMsg.name">{{store.state.userMsg.name}}</span>
            <span v-else class="noBind">未认证</span>
          </p>
          <img src="../../assets/images/right.png" alt="">
        </div>
      </div>
      <div class="setItem" @click="changeRoute('/UpdateNick')">
        <div>昵称</div>
        <div class="right">
          <p>{{store.state.userMsg.nickName}}</p>
          <img src="../../assets/images/right.png" alt="">
        </div>
      </div>
      <div class="setItem" @click="changeRoute('/UpdateInvite', 1)">
        <div>受邀码</div>
        <div class="right">
          <p>
            <span v-if="store.state.userMsg.invitationCode">{{store.state.userMsg.invitationCode}}</span>
            <span v-else class="noBind">未设置</span>
          </p>
          <img src="../../assets/images/right.png" alt="">
        </div>
      </div>
      <div class="setItem">
        <div>手机绑定</div>
        <div class="right">
          <p>{{`${store.state.userMsg.mobile.substring(0, 3)}****${store.state.userMsg.mobile.substring(7)}`}}</p>
          <img src="../../assets/images/right.png" alt="">
        </div>
      </div>
      <div class="setItem">
        <div>声音：{{['开启', '关闭'][store.state.userMsg.soundEffects - 0]}}</div>
        <div class="right">
          <van-switch size='21px' v-model="vioceState" @change="setVioce" />
        </div>
      </div>
      <div class="setItem">
        <div>动画：{{['开启', '关闭'][store.state.userMsg.animation - 0]}}</div>
        <div class="right">
          <van-switch size='21px' v-model="animateState" @change="setAnimate" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, provide } from "@vue/runtime-core"
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import { Toast } from 'vant'
import { updateUser } from "../../api/home"
export default {
  setup() {
    provide('title', '账户设置')
    const store = useStore()
    let vioceState = ref(store.state.userMsg.soundEffects == 0)
    let animateState = ref(store.state.userMsg.animation == 0)
    const router = useRouter()
    const changeRoute = (path, param) => {
      if (param) {
        if (store.state.userMsg.invitationCode) {
          return false
        }
      }
      router.push(path)
    }

    const setVioce = async (value) => {
      let loading = Toast.loading('设置中……')
      const res = await updateUser({ soundEffects: value ? 0 : 1 })
      loading.clear()
      if (res.code === 200) {
        Toast.success('设置成功！')
        store.commit('changeUserMsg')
      }
    }

    const setAnimate = async (value) => {
      let loading = Toast.loading('设置中……')
      const res = await updateUser({ 'animation': value ? 0 : 1 })
      loading.clear()
      if (res.code === 200) {
        Toast.success('设置成功！')
        store.commit('changeUserMsg')
      }
    }

    return {
      store,
      changeRoute,
      setVioce,
      setAnimate,
      animateState,
      vioceState
    }
  }
}
</script>